@extends('home.base')
@section('title')
    {{$city_info->name}}高档小区,二手房,租房,买房,房价 - {{$site['title']}}
@endsection
@section('content')
@include('home.header')
<div id="app">
    <div class="top-search">
        <div class="index-search" style="margin:0 auto;">
            <div class="input">
                <auto-complete
                    v-model="keyword"
                    value="{{$keyword??''}}"
                    clearable=true
                    @on-clear="clearKeywords"
                    placeholder="输入小区、房源名称">
                </auto-complete>
                <i-button type="warning" @click="getData">开始查找</i-button>
            </div>
        </div>
    </div>
    <div class="qr-content">
        <div class="w1200">
            <div class="attrs hand">
                <div class="arealist" v-show="Number(area)">
                    <span class="leftit">位置：</span>
                    <Tabs value="name1" @on-click="changeTab" class="pos-tabs">
                        <tab-pane label="按区域" name="name1">
                            <div v-for="item in city" :key="item.id" class="son_tabs">
                                <div class="region_tab" :class="{active:cur==item.id}" @click="changeRegion(item.id)">@{{ item.name }}</div>
                            </div>
                        </tab-pane>
                        <tab-pane label="按地铁" name="name2" v-if="metro.length">
                            <div v-for="item in metro" :key="item.id" class="metro">
                                <div class="region_tab" :class="{active:curMetro==item.id}" @click="changeMetro(item.id)">@{{ item.name }}</div>
                            </div>
                        </tab-pane>
                    </Tabs>
                </div>
                {{--区域信息--}}
                <div class="otherlist" v-show="cityArea.length">
                    <span class="leftit">&nbsp;</span>
                    <checkbox-group v-model="townData" @on-change="getData" class="list">
                        <Checkbox v-for="item in cityArea" :key="item.id" :label="item.id">@{{ item.name }}</Checkbox>
                    </checkbox-group>
                </div>
                {{--站点信息--}}
                <div class="otherlist" v-show="station.length">
                    <span class="leftit">&nbsp;</span>
                    <checkbox-group v-model="stationData" @on-change="getData" class="list">
                        <Checkbox v-for="item in station" :key="item.id" :label="item.id">@{{ item.name }}</Checkbox>
                    </checkbox-group>
                </div>

                <div class="otherlist">
                    <div class="inline">
                        <span class="leftit">均价：</span>
                        <i-input v-model="minPrice" @on-clear="getData" placeholder="0" clearable style="width: 80px"></i-input>
                        <span>-</span>
                        <i-input v-model="maxPrice" @on-clear="getData" placeholder="2000" clearable style="width: 80px"></i-input>
                        <i-button @click="getData">确定</i-button>
                    </div>
                </div>
                <div class="otherlist">
                    <span class="leftit">房龄：</span>
                    <radio-group v-model="year" @on-change="getData">
                        <Radio label="0,5">5年内</Radio>
                        <Radio label="5,10">5-10年</Radio>
                        <Radio label="10,20">10-20年</Radio>
                        <Radio label="20,200">20年以上</Radio>
                    </radio-group>
                </div>
            </div>

            <div class="detail-content">
                <div class="left community_left">
                    <div class="sort">
                        <div class="sort-left">
                            <div class="btn" :class="{active:sort==='default'}" id="default" @click="changeSort('default')">默认排序</div>
                            <div class="price btn" :class="{active:sort==='asc' || sort==='desc'}">
                                <span>按价格</span>
                                <Icon type="md-arrow-dropdown" v-if="sort === 'desc'"></Icon>
                                <Icon type="md-arrow-dropup" v-if="sort === 'asc'"></Icon>
                                <div class="dropdown">
                                    <span @click="changeSort('asc')">低到高</span>
                                    <span @click="changeSort('desc')">高到低</span>
                                </div>
                            </div>
                            <div class="btn" :class="{active:sort==='popular'}" @click="changeSort('popular')">
                                人气小区
                                <Icon type="md-arrow-dropdown" v-if="sort === 'popular'"></Icon>
                            </div>
                        </div>
                        <div class="sort-right">
                            共<span>@{{ total }}</span>个小区
                        </div>
                    </div>
                    <div class="vlist hand" v-show="!loading">
                        <div class="con" v-for="item in proData" :key="item.id">
                            <div class="img">
                                <a :href="`/residential/${item.id}`">
                                    <img :src="item.thumb" v-if="item.thumb" alt="">
                                    <img src="/images/default.jpg" v-else alt="">
                                </a>
                                <span>@{{ item.regionname }}</span>
                            </div>
                            <div class="detail">
                                <h3 style="margin-bottom: 10px;">
                                    <a :href="`/residential/${item.id}`">@{{item.title}}</a>
                                </h3>
                                <div class="hr-count">
                                    <a :href=`/community/hand/${item.id}` target="_blank">二手房 @{{ item.handroom_count }} 套</a>
                                    <a :href=`/community/rental/${item.id}` target="_blank">租房 @{{ item.rentalhouse_count }} 套</a>
                                </div>
                                <div class="hdesc">
                                    <Icon type="ios-home-outline"></Icon>
                                    <span class="tip">@{{item.regionname}} @{{ item.areaname }}</span>
                                    <span class="line">|</span>
                                    <span class="tip">@{{ item.year }}年建</span>
                                    <span class="line">|</span>
                                    <span class="tip">@{{ item.attribute.name }}</span>
                                </div>
                                <div class="address hdesc">
                                    <Icon type="ios-pin-outline"></Icon>
                                    <div class="addr nowrap">
                                        @{{ item.address }}
                                    </div>
                                    <a :href="`/property/map?pos=${item.map}&n=${item.title}`" target="_blank" class="map">
                                        <Icon type="md-pin"></Icon>
                                        <span class="txt">查看地图</span>
                                    </a>
                                </div>
                            </div>
                            <div class="average">
                                <div class="price" v-if="item.handroom_count">
                                    <span>@{{ parseInt(item.handroom_avg) }}</span>元/平米
                                </div>
                                <div class="price" v-else>
                                    <span style="font-size:14px;">暂未报价</span>
                                </div>
                            </div>
                            <div class="agent">
                                <img src="/images/default.jpg" alt="">
                                <p>小区经纪人</p>
                                <p class="tel">13000000000</p>
                            </div>
                        </div>
                    </div>
                    <div class="loading" v-show="loading">
                        <Spin size="large"></Spin>
                    </div>
                    <div class="empty" v-show="total === 0 && !loading">
                        暂时没有查询到符合条件的楼盘信息
                    </div>
                    <div class="page">
                        <Page :total="total" :page-size="pageSize" :current.sync="current" show-sizer show-total @on-change="getData" @on-page-size-change="handleChangeSize" />
                    </div>
                </div>
                <div class="right">

                </div>
            </div>

        </div>
        <input type="hidden" id="keyword" value="{{$keyword}}">
        @include('home.footer')
    </div>
</div>
@endsection

@section('script')
    <style>
        .qr .qr-menu .menu a.menu_7{color:#f90;border-bottom:2px solid #f90}
    </style>
    <script src="/static/home/js/community.js"></script>
@endsection